<template>
  <div class="view">
    <echartsView :loading="loading" :options="options" height="260px"></echartsView>
    <div class="text">
      <p>
        季度人数<span :class="isDown ? 'text-error' : 'text-success'">{{ isDown ? '减少' : '增加' }}{{ number }}</span
        >人
      </p>
      <p>
        同比<span
          :class="isDown ? 'text-error' : 'text-success'"
        >{{ isDown ? '降低' : '增长' }}{{ data.Module_3 ? data.Module_3.BL : '0%' }}</span
        >
      </p>
    </div>
  </div>
</template>

<script>
import { echartsView } from '@/components'
export default {
  components: {
    echartsView
  },
  props: {
    data: {
      required: true,
      type: Object,
      default: () => {}
    }
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler (n) {
        if (!this.$isEmpty(n)) {
          this.setOptions()
        }
      }
    }
  },
  computed: {
    number () {
      if (this.$isEmpty(this.data.Module_3)) return 0
      const { Count, SC } = this.data.Module_3
      return this.isDown ? SC - Count : Count - SC
    }
  },
  data () {
    return {
      isDown: false,
      loading: false,
      options: {
        color: ['#2478f2', '#84b7f9'],
        title: [
          {
            text: '申报人数完成率',
            top: '16px',
            left: '16px',
            textStyle: {
              color: '#fff'
            }
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '申报人数',
            type: 'pie',
            radius: ['50%', '60%'],
            center: ['25%', '55%'],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
    }
  },
  methods: {
    setOptions () {
      this.loading = true
      this.options.series[0].data = []
      const { Count, SC } = this.data.Module_3
      this.isDown = Count < SC
      this.options.series[0].data = [
        { value: Count, name: '本季度' },
        { value: SC, name: '上季度' }
      ]
      this.loading = false
    }
  }
}
</script>
<style lang="less" scoped>
.view {
  position: relative;
  font-size: 18px;
  width: 100%;
  .text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    span {
      font-weight: bold;
    }
  }
}
</style>
